<template>
  <div class="song-list-page">
    <div class="song-list-header">
      <div class="header-all">
        <span class="active" @click="">全部</span>
        <hr>
        <div class="catStyle" v-for="(style,index) in songStyle" v-show="index<3 ||showmore">
          <span class="B" @click="filter(style.id,1)">{{style.name}}:</span>
          <ul>
            <li v-for="child in style.child" @click="filter(child.id,0)">{{child.name}}</li>
          </ul>
        </div>
        <div class="showButton">
          <div v-show="showmore" @click="showMore">收起
            <i class="el-icon-arrow-up"  ></i>
          </div>
          <div v-show="!showmore" @click="showMore">更多
            <i class="el-icon-arrow-down" v-show="!showmore" @click="showMore"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="song-content">
      <content-list :contentList="songLists_p"></content-list>
    </div>
    <div class="text-xs-center" style="margin-top: 80px">
      <v-pagination
        v-model="page"
        :length="totalPage"
      ></v-pagination>
    </div>
  </div>
</template>

<script>
import { mixin } from '../mixins'
import { mapGetters } from 'vuex'
import axios from 'axios'
import ContentList from '../components/ContentList'

export default {
  name: 'song-list-page',
  data () {
    return {
      songStyle: [],
      songLists_p: [],   //此组件的属性
      activeName: '全部歌单',
      showmore:false,
      page: 1,
      pages: 1
    }
  },
  computed: {
    ...mapGetters([
      'songsList',
      'totalPage'
    ]),
  },
  components: {
    ContentList
  },
  created() {
    this.getCategory()
    this.getSongLists()
  },
  mounted : function () {
    this.songLists_p = this.songsList

  },
  mixins: [mixin],
  methods: {
    // handleChangeView: function (name) {
    //   let pattern = new RegExp(name)
    //   this.activeName = name
    //   this.albumDatas = []
    //   if (name === '全部歌单') {
    //     this.albumDatas = this.songsList
    //   } else {
    //     this.getAlbumDatas(pattern)
    //   }
    // },
    // getAlbumDatas (pattern) {
    //   for (let i = 0; i < this.songsList.length; i++) {
    //     if (pattern.test(this.songsList[i].style)) {
    //       var item = this.songsList[i]
    //       item.list = i
    //       this.albumDatas.push(item)
    //     }
    //   }
    // },
    // 获得所有分类
    // goSongAlbum (id, index) {
    //   this.$store.commit('setIndex', index)
    //   window.sessionStorage.setItem('index', JSON.stringify(index))
    //   this.$router.push({path: '/song-list-album-page/' + id})
    // },

    // 获得所有的分类
    getCategory() {
      axios.get('http://120.79.58.44:8080/api'+'/category/of/parent?pid=0').then(resp=>{
        this.songStyle = resp.data
        console.log(resp.data)
      })
    },

    // 控制更多和收起的操作
    showMore() {
      this.showmore = !this.showmore
    },

    // 筛选歌单
    filter(id,isparent) {
      axios.get(this.$store.state.HOST+"/songlist/of/category",{
        params:{
          page: this.page,
          rows: 25,
          cid: id,
          isParent: isparent
        }
      }).then(resp=>{
        this.songLists_p = resp.data.items || []
      }).catch(()=>{

        this.songLists_p = []
      })
    }
  }
}
</script>

<style scoped>
  .showButton {
    font-size: 1.3em;
    margin-left: 400px;
    font-weight: 500;
    color: black;
    cursor: pointer;
  }
  .catStyle{
    color: black;
    font-size: 10px;
    font-weight: 400;
  }
  .catStyle ul li {
    margin-left: 20px;
    font-size: 18px;
    color: gray;
    cursor: pointer;
  }
  .catStyle ul li:hover{
    color: cornflowerblue;

  }
  .header-all .catStyle span{
    font-size: 20px;
    margin-top: 10px;
    font-weight: 400;
    margin-left: 20px;
  }
  .song-list-page {
    margin: 30px 150px;
    padding-bottom: 50px;
    min-width: 800px;
    background-color: #ffffff;
  }
  .song-list-header {
    width: 90%;
    padding: 0 40px;
  }
  .header-all span {
    display: inline-block;
    line-height: 40px;
    margin-top: 40px;
    margin-left: 20px;
    font-size: 30px;
    color: #67757f;
    border-bottom: none;
    cursor: pointer;
    color: black;
    font-weight: 600;
  }

  .header-all hr {
    width: 100%;
    color: black;
    margin-left: 20px;
    margin-top: 15px;
    border: 2px solid black;
  }
</style>
